<template>
  <div>
    <el-row :gutter="10" style="padding: 10px" >
      <el-form :inline="true" ref="ruleForm" :model="formInline" class="demo-form-inline">
        <el-col :span="2" v-for="(item,index) in searchList" :key="index" class="input">
          <el-input
            v-if="item.type==='input'"
            size="mini"
            v-model="formInline[item.key]"
            :placeholder="item.placeholder">
          </el-input>
          <el-select v-if="item.type==='option'" size="mini" v-model="formInline[item.key]" placeholder="请选择">
            <el-option
              v-for="item1 in item.options"
              :key="item1.value"
              :label="item1.label"
              :value="item1.value">
            </el-option>
          </el-select>
          <el-date-picker
            size="mini"
            v-if="item.type==='date'"
            v-model="formInline[item.key]"
            type="daterange"
            range-separator="至"
            :start-placeholder="item.placeholder1"
            :end-placeholder="item.placeholder2">
          </el-date-picker>
        </el-col>
      </el-form>
      <!-- <el-col :span="2"><el-input size="mini" v-model="input1"> </el-input></el-col> -->
      <div class="button">
        <el-button type="primary" size="mini" @click="search">查询</el-button>
        <el-button type="primary" size="mini" @click="reset">重置</el-button>
      </div>
      <!-- <el-col :span="2"><el-input size="mini" v-model="input1"> </el-input></el-col> -->
      <!-- <el-col :span="2"><el-input size="mini" v-model="input1"> </el-input></el-col> -->
    </el-row>
  </div>
</template>

<script>
export default {
  name: "SearchBar",
  props: {
    searchList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      formInline:{},
      options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
    };
  },
  created(){
    // console.log(this.searchList,'DD')
  },
  methods:{
    search(){
      // console.log(this.formInline,"11")
      this.$emit("search",this.formInline)
    },
    reset(){
      this.formInline={}
      this.$emit('search',this.formInline)
    }
  },
  watch:{
    formInline: {
      handler(newVal,oldVal){
        this.$set(this.formInline,'beginDate',new Date(newVal.date[0]).Format("yyyy-MM-dd"))
        this.$set(this.formInline,'endDate',new Date(newVal.date[1]).Format("yyyy-MM-dd"))
        // console.log(newVal,oldVal)
      },
      immediate:true,
      deep:true,
    }
  }
};
</script>

<style>
.input{
  float: left;
  
}
.button{
  float: right;
}
</style>